<template>
	<div id="vip">
		<p class="Title">升级VIP</p>
		<div class="vip_title">
			<span>1</span>请选择升级会员套餐类型
			<img src="../../static/img/vip-01.png" />
		</div>
		<div class="vip_1">
			<ul>
				<li @click="vipChange = 1" :class="vipChange == 1?'vip_active':''">
					<img src="../../static/img/vip-05.png"/>
					<p>年费VIP</p>
					<div>
						<p class="now"><span>1988</span>元/年</p>
						<p class="old">3988元/年</p>
					</div>
					<img v-show="vipChange == 1" src="../../static/img/recharge-02.png"/>
				</li>
				<li @click="vipChange = 2" :class="vipChange == 2?'vip_active':''">
					<img src="../../static/img/vip-05.png"/>
					<p>季度VIP</p>
					<div>
						<p class="now"><span>688</span>元/季度</p>
						<p class="old">888元/季度</p>
					</div>
					<img v-show="vipChange == 2" src="../../static/img/recharge-02.png"/>
				</li>
				<li @click="vipChange = 3" :class="vipChange == 3?'vip_active':''">
					<img src="../../static/img/vip-05.png"/>
					<p>月费VIP</p>
					<div>
						<p class="now"><span>288</span>元/月</p>
						<p class="old">388元/月</p>
					</div>
					<img v-show="vipChange == 3" src="../../static/img/recharge-02.png"/>
				</li>
			</ul>
			<div class="cue">
				<p>服务说明：成为VIP会员后，可在服务期内无限发布试用活动，免费试用发布任务增值服务等，并拥有赶紧试VIP商家标签。</p>
			</div>
			<input id="sub" type="button" value="确认支付" />
		</div>
		<div class="vip_title">
			<span>2</span>会员特权比对
		</div>
		<div class="vip_2">
			
		</div>
	</div>
</template>

<script>
export default{
	name: 'vip',
	data:function(){
		return{
			vipChange: 1,//vip套餐选中
		}
	}
}
</script>

<style scoped>
#vip{
	width: 1030px;
	background-color: #fff;
	padding: 30px;
	box-sizing: border-box;
}
.Title{
	font-size: 20px;
	color: #545454;
}
.vip_title{
	font-size: 16px;
	color: #545454;
	display: flex;
	align-items: center;
	margin-top: 15px;
}
.vip_title>span{
	font-size: 14px;
	background-color: #545454;
	border-radius: 50%;
	width: 18px;
	height: 18px;
	color: #FFFFFF;
	display: block;
	text-align: center;
	line-height: 18px;
	margin-right: 5px;
}
.vip_title p{
	font-size: 14px;
	color: #808080;
	margin-left: 10px;
	padding-top: 5px;
}
.vip_title img{
	height: 14px;
	display: block;
	margin-left: 10px;
}
/*----------选择会员套餐------------*/
.vip_1{
	margin-left: 27px;
	margin-right: 27px;
	margin-top: 20px;
}
.vip_1 ul{
	display: flex;
}
.vip_1 ul li{
	width: 32%;
	margin-right: 2%;
	border: 1px solid #E6E6E6;
	position: relative;
	height: 160px;
	cursor: pointer;
}
.vip_1 ul li.vip_active{
	border: 1px solid #FF464E;
}
.vip_1 ul li:last-child{
	margin-right: 0;
}
.vip_1 ul li img:first-child{
	height: 50px;
	display: block;
	margin: 0 auto;
	margin-top: 30px;
}
.vip_1 ul li>p:nth-child(2){
	font-size: 20px;
	color: #545454;
	text-align: center;
	margin-top: 5px;
}
.vip_1 ul li div{
	text-align: center;
}
.vip_1 ul li .now{
	display: inline-block;
	color: #545454;
}
.vip_1 ul li .now span{
	font-size: 18px;
	font-weight: 600;
	color: #FF464E;
}
.vip_1 ul li .old{
	display: inline-block;
	color: #808080;
	text-decoration: line-through;
	font-size: 12px;
	margin-left: 5px;
}
.vip_1 img:last-child{
	height: 40px;
	display: block;
	position: absolute;
	bottom: 0;
	right: 0;
}
.cue{
	background-color: #F5F5F5;
	padding: 18px 30px;
	box-sizing: border-box;
	margin-top: 15px;
}
#sub{
	width: 150px;
	height: 40px;
	border: none;
	background: linear-gradient(to right,#f3c767,#fe8c0d);
	border-radius: 3px;
	display: block;
	margin: 0 auto;
	color: #FFFFFF;
	margin-top: 30px;
	font-size: 16px;
}
</style>